<template>
  <div class="hello">
    <input v-model="name">
    <button @click="findMp3(1)">搜索</button>
     <table class="table table-bordered table-striped text-center">
      <thead>
          <tr>
              <th>序号</th>
              <th>歌曲</th>
              <th>作者</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for ="(it,index) in items" :key="index">
            <td>{{index+1}}</td>
            <td>{{it.songname}}</td>
            <td>{{it.singername}}</td>
            <td><button v-on:click="paly(index)">播放</button></td>
          </tr>
      </tbody>
  </table>
  <button @click="findMp3(pageNum)" >下一页</button>
  <audio :src="miuUrl" autoplay="" controls="">
    </audio>
  </div>
</template>

<script>
import {getMuisc,getUrl} from "@/api/mp3"

export default {
  name: 'HelloWorld',
  data () {
    return {
      items: [],
      name: "",
      miuUrl: "#",
      pageNum: 1
    }
  },
  methods: {
    findMp3(page) {
      getMuisc({"name": this.name,"page": page})
      .then(res => {
        this.items = res.data
        this.pageNum = this.pageNum+1
      })
      .catch(err => []);
    },
    paly(index) {
      console.log(this.items)
      getUrl({
        "hash": this.items[index].hash,
        "song": this.items[index].album_id
      }).then(res => {
        this.miuUrl = res.data.data.play_url
      }).catch(err => [])
    }
  }
}
</script>

<style scoped>
table{
  margin: 0px auto;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
tr,th{
  text-align:center;
}
</style>